<template>
  <div class="BaseInfo">

    <div v-if="false" class="base-row">
      <div class="key">序列号</div>
      <div class="value">{{info.tenant_id}}</div>
    </div>
    <div class="base-row">
      <div class="key">CPU（核）</div>
      <div class="value">{{info ? info.cpu : ''}}</div>
    </div>
    <div class="base-row">
      <div class="key">内存（GB）</div>
      <div class="value">{{info ? info.memory : ''}}</div>
    </div>
    <div class="base-row">
      <div class="key">操作系统</div>
      <div class="value">{{info ? info.os : ''}}</div>
    </div>
    <div class="base-row">
      <div class="key">系统架构</div>
      <div class="value">{{info ? info.arch : ''}}</div>
    </div>
    <div v-if="false" class="base-row">
      <div class="key">版本信息</div>
      <div class="value">123456897</div>
    </div>
    <div class="base-row">
      <div class="key">私网IP</div>
      <div class="value">{{info ? info.private_ip : ''}}</div>
    </div>
    <div class="base-row">
      <div class="key">公网IP</div>
      <div class="value">{{info ? info.public_ip : ''}}</div>
    </div>

    
  </div>
</template>

<script>
import * as api from "@/api";
export default {
  data() {
    return {
      info: {}
    }
  },
  methods: {
    async hubDetail() {
      const { code, data } = await api.maxInfo(this).hubDetail({
        hub_id: this.$route.query.serial
      })
      if (code === 0) {
        this.info = data
      }
    },
  },
  created () {
    this.hubDetail()
  },
}
</script>

<style lang="stylus">
.BaseInfo {
  box-sizing: border-box;
  padding: getPx(40) 0 0 getPx(60);
  .base-row {
    flexMiddle(flex-start);
    height: getPx(40);
    .key {
      color: #8396b6;
      width: getPx(140);  
    }
    .value {
      color: #333;  
    }  
  }
}
</style>